import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"

const app = createApp(App)

app.use(ElementPlus)
app.use(router)

app.mount("#app")

// 使用setTimeout确保DOM已更新后再执行初始化
setTimeout(() => {
	try {
		if (typeof initSiteFeatures === "function") {
			initSiteFeatures()
		}
		if (typeof bindEventListeners === "function") {
			bindEventListeners()
		}
	} catch (error) {
		console.error("初始化功能时出错:", error)
	}
}, 100)

// 全局JavaScript文件
// 包含网站的核心功能和交互逻辑

// 页面加载完成后执行
/*document.addEventListener('DOMContentLoaded', function() {
  // 初始化网站功能
  initSiteFeatures();

  // 绑定事件监听器
  bindEventListeners();
});*/

/**
 * 初始化网站功能
 */
function initSiteFeatures() {
	// 初始化时间显示
	initTimeDisplay()

	// 初始化图片懒加载
	initImageLazyLoading()

	// 初始化页面动画
	initPageAnimations()

	// 初始化工具提示
	initTooltips()
}

/**
 * 初始化时间显示功能
 */
function initTimeDisplay() {
	const timeElement = document.getElementById("span_dt_dt")
	if (timeElement) {
		updateTimeDisplay()
		setInterval(updateTimeDisplay, 1000)
	}
}

/**
 * 更新时间显示
 */
function updateTimeDisplay() {
	const timeElement = document.getElementById("span_dt_dt")
	if (timeElement) {
		const now = new Date()
		const timeString = now.toLocaleString("zh-CN", {
			year: "numeric",
			month: "long",
			day: "numeric",
			weekday: "long",
			hour: "2-digit",
			minute: "2-digit",
			second: "2-digit",
		})
		timeElement.textContent = timeString
	}
}

/**
 * 初始化图片懒加载
 */
function initImageLazyLoading() {
	// 如果项目中使用了FunLazy库
	if (typeof FunLazy !== "undefined") {
		FunLazy({
			placeholder: "Style/img/Loading2.gif",
			effect: "show",
			strictLazyMode: false,
			useErrorImagePlaceholder:
				"https://img.gejiba.com/images/dbc7f2562e051afc3c39f916689ba5f0.png",
		})
	}
}

/**
 * 初始化页面动画
 */
function initPageAnimations() {
	// 如果使用了animate.css
	const animatedElements = document.querySelectorAll(".animated")
	animatedElements.forEach((element) => {
		// 确保动画类被正确应用
		element.style.visibility = "visible"
	})
}

/**
 * 初始化工具提示
 */
function initTooltips() {
	// 初始化Bootstrap工具提示（如果使用）
	const tooltipTriggerList = [].slice.call(
		document.querySelectorAll('[data-bs-toggle="tooltip"]')
	)
	tooltipTriggerList.map(function (tooltipTriggerEl) {
		return new bootstrap.Tooltip(tooltipTriggerEl)
	})
}

/**
 * 绑定事件监听器
 */
function bindEventListeners() {
	// 绑定导航链接点击事件
	// bindNavigationEvents()

	// 绑定表单提交事件
	bindFormEvents()

	// 绑定图片点击事件
	bindImageEvents()
}

/**
 * 绑定导航事件
 */
// function bindNavigationEvents() {
// 	if ($) {
// 		// 如果使用了PJAX
// 		if (typeof $.pjax !== "undefined") {
// 			$(document).pjax("a[target!=_blank]", "#pjax-container", {
// 				fragment: "#pjax-container",
// 				timeout: 15000,
// 			})

// 			$(document).on("pjax:send", function () {
// 				// 显示加载进度
// 				if (typeof NProgress !== "undefined") {
// 					NProgress.start()
// 				}
// 			})

// 			$(document).on("pjax:complete", function () {
// 				// 隐藏加载进度
// 				if (typeof NProgress !== "undefined") {
// 					NProgress.done()
// 				}

// 				// 重新初始化功能
// 				initSiteFeatures()
// 			})
// 		}
// 	}
// }

/**
 * 绑定表单事件
 */
function bindFormEvents() {
	// 绑定留言表单提交
	const leavingForm = document.getElementById("leavingForm")
	if (leavingForm) {
		leavingForm.addEventListener("submit", function (e) {
			e.preventDefault()
			submitLeavingMessage()
		})
	}
}

/**
 * 提交留言
 */
function submitLeavingMessage() {
	// 实现留言提交逻辑
	const form = document.getElementById("leavingForm")
	const formData = new FormData(form)

	// 使用fetch API提交数据
	fetch("/api/leaving", {
		method: "POST",
		body: formData,
	})
		.then((response) => response.json())
		.then((data) => {
			if (data.status === "success") {
				// 显示成功消息
				showToast("留言提交成功", "success")
				form.reset()
			} else {
				// 显示错误消息
				showToast("留言提交失败: " + data.message, "error")
			}
		})
		.catch((error) => {
			showToast("网络错误，请稍后重试", "error")
		})
}

/**
 * 绑定图片事件
 */
function bindImageEvents() {
	// 为图片添加点击放大功能
	const images = document.querySelectorAll(".spotlight")
	images.forEach((img) => {
		img.addEventListener("click", function () {
			// 如果使用了spotlight.js
			if (typeof Spotlight !== "undefined") {
				Spotlight.show([
					{
						src: this.src,
						title: this.alt,
					},
				])
			}
		})
	})
}

/**
 * 显示提示消息
 * @param {string} message - 消息内容
 * @param {string} type - 消息类型 (success, error, warning, info)
 */
function showToast(message, type) {
	// 如果使用了toastr
	if (typeof toastr !== "undefined") {
		toastr[type](message)
	} else {
		// 备用方案：使用浏览器alert
		alert(message)
	}
}

/**
 * 获取QQ用户信息
 * @param {string} qq - QQ号码
 */
function getQQUserInfo(qq) {
	fetch(`https://api.usuuu.com/qq/${qq}`)
		.then((response) => response.json())
		.then((data) => {
			// 处理QQ用户信息
			if (data.status === 200) {
				// 填充用户信息
				document.getElementById("userName").value = data.data.name
				// 设置头像
				const avatar = document.querySelector(".avatar")
				if (avatar) {
					avatar.src = `https://q1.qlogo.cn/g?b=qq&nk=${qq}&s=100`
				}
			}
		})
		.catch((error) => {
			console.error("获取QQ信息失败:", error)
		})
}

// 滚动事件处理
window.addEventListener("scroll", function () {
	handleScroll()
})

/**
 * 处理滚动事件
 */
function handleScroll() {
	const scrollTop =
		document.documentElement.scrollTop || document.body.scrollTop

	// 根据滚动位置改变元素样式
	const wenanElements = document.querySelectorAll(".wenan")
	const alogoElements = document.querySelectorAll(".alogo")

	if (scrollTop > 500) {
		wenanElements.forEach((el) => {
			el.style.color = "#333333"
		})
		alogoElements.forEach((el) => {
			el.style.color = "#333333"
		})
	} else {
		wenanElements.forEach((el) => {
			el.style.color = "#fff"
		})
		alogoElements.forEach((el) => {
			el.style.color = "#fff"
		})
	}
}

// 导出函数供其他模块使用
window.LikeGirl = {
	initSiteFeatures,
	showToast,
	getQQUserInfo,
}

// 控制台输出版权信息
console.log(
	"%c Like Girl v5.1.0 | Powered by Ki",
	"color:#fff;background:linear-gradient(270deg,#986fee,#8695e6,#68b7dd,#18d7d3);padding:8px 15px;border-radius:15px"
)
console.log(
	"%c Q | 3439780232",
	"color:#fff;background:#000;padding:8px 15px;border-radius:15px"
)
